<template>
  <q-card-actions align="right">
    <q-btn label="Assign" class="yellow-btn" @click="openAssignDialog()" />
  </q-card-actions>
  <ScrollArea :bot-margin="50">
    <div class="sub-header q-ma-sm">{{ 'CM' }}</div>

    <q-table
      class="my-table"
      :columns="columns"
      :rows="cmRows"
      :pagination="{ rowsPerPage: 5 }"
      @row-dblclick="dblclickFn"
      wrap-cells
    >
      <template v-slot:header-cell-mtce_type="props">
        <q-td style="display: none">
          {{ props.col }}
        </q-td>
      </template>
      <template v-slot:body-cell-mtce_type="props">
        <q-td style="display: none">
          {{ props.value }}
        </q-td>
      </template>

      <template v-slot:body-cell-e_form="props">
        <q-td>
          <div>
            <q-btn
              v-if="props.row.has_eform"
              class="e-form-btn cap"
              @click="goEformWebsite(props.row.eform_schema_id)"
            >
              <div class="fac">
                <img :src="eformIcon" />
                <div class="q-ml-sm">E-form</div>
              </div>
            </q-btn>
          </div>
        </q-td>
      </template>

      <template v-slot:body-cell-type="props">
        <q-td>
          <div>
            <q-chip
              :label="props.row.cur_tab ? 'Current Task' : ''"
              square
              v-if="props.row.cur_tab"
            >
            </q-chip>
            <q-chip
              :label="props.row.final_tab ? 'Final Check' : ''"
              square
              v-if="props.row.final_tab"
            >
            </q-chip>
          </div>
        </q-td>
      </template>

      <template v-slot:body-cell-actions="props">
        <q-td>
          <q-btn
            dense
            round
            flat
            class="edit-btn"
            icon="edit"
            @click.stop="openEditDialog(props.row)"
          ></q-btn>
          <q-btn
            dense
            round
            flat
            class="del-btn"
            @click.stop="deleteFn(props.row.id)"
            icon="delete"
          ></q-btn>
        </q-td>
      </template>
    </q-table>

    <div class="sub-header q-ma-sm">{{ 'PM' }}</div>
    <q-table
      class="my-table"
      v-if="pmRows"
      :columns="columns"
      :rows="pmRows"
      :pagination="{ rowsPerPage: 5 }"
      wrap-cells
    >
      <template v-slot:header-cell-mtce_type="props">
        <q-td style="display: none">
          <!-- {{ props.row.stock_item.stock_code }} -->
          {{ props.col }}
        </q-td>
      </template>
      <template v-slot:body-cell-mtce_type="props">
        <q-td style="display: none">
          <!-- {{ props.row.stock_item.stock_code }} -->
          {{ props.value }}
        </q-td>
      </template>
      <template v-slot:body-cell-e_form="props">
        <q-td>
          <div>
            <q-btn
              v-if="props.row.has_eform"
              class="e-form-btn cap"
              @click="goEformWebsite(props.row.eform_schema_id)"
            >
              <div class="fac">
                <img :src="eformIcon" />
                <div class="q-ml-sm">E-form</div>
              </div>
            </q-btn>
          </div>
        </q-td>
      </template>

      <template v-slot:body-cell-type="props">
        <q-td>
          <q-chip
            :label="props.row.cur_tab ? 'Current Task' : ''"
            square
            v-if="props.row.cur_tab"
          >
          </q-chip>
          <q-chip
            :label="props.row.final_tab ? 'Final Check' : ''"
            square
            v-if="props.row.final_tab"
          >
          </q-chip>
        </q-td>
      </template>

      <template v-slot:body-cell-actions="props">
        <q-td>
          <div>
            <q-btn
              dense
              round
              flat
              class="edit-btn"
              icon="edit"
              @click.stop="openEditDialog(props.row)"
            ></q-btn>
            <q-btn
              dense
              round
              flat
              class="del-btn"
              @click.stop="deleteFn(props.row.id)"
              icon="delete"
            ></q-btn>
          </div>
        </q-td>
      </template>
    </q-table>
    <div class="sub-header q-ma-sm">{{ 'NM' }}</div>

    <q-table
      class="my-table"
      v-if="nmRows"
      :columns="columns"
      :rows="nmRows"
      :pagination="{ rowsPerPage: 5 }"
      wrap-cells
    >
      <template v-slot:header-cell-mtce_type="props">
        <q-td style="display: none">
          <!-- {{ props.row.stock_item.stock_code }} -->
          {{ props.col }}
        </q-td>
      </template>
      <template v-slot:body-cell-mtce_type="props">
        <q-td style="display: none">
          <!-- {{ props.row.stock_item.stock_code }} -->
          {{ props.value }}
        </q-td>
      </template>
      <template v-slot:body-cell-e_form="props">
        <q-td>
          <div>
            <q-btn
              v-if="props.row.has_eform"
              class="e-form-btn cap"
              @click="goEformWebsite(props.row.eform_schema_id)"
            >
              <div class="fac">
                <img :src="eformIcon" />
                <div class="q-ml-sm">E-form</div>
              </div>
            </q-btn>
          </div>
        </q-td>
      </template>

      <template v-slot:body-cell-type="props">
        <q-td>
          <div>
            <q-chip
              :label="props.row.cur_tab ? 'Current Task' : ''"
              square
              v-if="props.row.cur_tab"
            >
            </q-chip>
            <q-chip
              :label="props.row.final_tab ? 'Final Check' : ''"
              square
              v-if="props.row.final_tab"
            >
            </q-chip>
          </div>
        </q-td>
      </template>

      <template v-slot:body-cell-actions="props">
        <q-td>
          <div>
            <q-btn
              dense
              round
              flat
              class="edit-btn"
              icon="edit"
              @click.stop="openEditDialog(props.row)"
            ></q-btn>
            <q-btn
              dense
              round
              flat
              class="del-btn"
              @click.stop="deleteFn(props.row.id)"
              icon="delete"
            ></q-btn>
          </div>
        </q-td>
      </template>
    </q-table>

    <div class="sub-header q-ma-sm">{{ 'IGI' }}</div>

    <q-table
      class="my-table"
      v-if="igiRows"
      :columns="columns"
      :rows="igiRows"
      :pagination="{ rowsPerPage: 5 }"
      wrap-cells
    >
      <template v-slot:header-cell-mtce_type="props">
        <q-td style="display: none">
          <!-- {{ props.row.stock_item.stock_code }} -->
          {{ props.col }}
        </q-td>
      </template>
      <template v-slot:body-cell-mtce_type="props">
        <q-td style="display: none">
          <!-- {{ props.row.stock_item.stock_code }} -->
          {{ props.value }}
        </q-td>
      </template>
      <template v-slot:body-cell-e_form="props">
        <q-td>
          <div>
            <q-btn
              v-if="props.row.has_eform"
              class="e-form-btn cap"
              @click="goEformWebsite(props.row.eform_schema_id)"
            >
              <div class="fac">
                <img :src="eformIcon" />
                <div class="q-ml-sm">E-form</div>
              </div>
            </q-btn>
          </div>
        </q-td>
      </template>

      <template v-slot:body-cell-type="props">
        <q-td>
          <div>
            <q-chip
              :label="props.row.cur_tab ? 'Current Task' : ''"
              square
              v-if="props.row.cur_tab"
            >
            </q-chip>
            <q-chip
              :label="props.row.final_tab ? 'Final Check' : ''"
              square
              v-if="props.row.final_tab"
            >
            </q-chip>
          </div>
        </q-td>
      </template>

      <template v-slot:body-cell-actions="props">
        <q-td>
          <div>
            <q-btn
              dense
              round
              flat
              class="edit-btn"
              icon="edit"
              @click.stop="openEditDialog(props.row)"
            ></q-btn>
            <q-btn
              dense
              round
              flat
              class="del-btn"
              @click.stop="deleteFn(props.row.id)"
              icon="delete"
            ></q-btn>
          </div>
        </q-td>
      </template>
    </q-table>
  </ScrollArea>

  <q-dialog v-model="assignTask">
    <AssignTask
      :style="'assign'"
      :stock_id="props.stock_id"
      @close="closeDialog"
      @update="getStockItemTasksData()"
    />
  </q-dialog>

  <q-dialog v-model="editDialogVisible">
    <AssignTask
      :style="'edit'"
      :taskItem="editedRow"
      :stock_id="editedRow.stock_id"
      @close="closeDialog"
      @update="getStockItemTasksData()"
    />
  </q-dialog>

  <q-dialog v-model="deleteDialogVisible">
    <q-card>
      <MyDialog
        title="Delete"
        :content="`Ready to delete task: ${editedRow.name} `"
      >
      </MyDialog>

      <q-card-actions align="right">
        <q-btn class="close-btn" flat label="Cancel" v-close-popup />
        <!--         <q-btn class="delete-btn" flat label="Delete" @click="openDeleteDialog(editedRow.id)" />
 -->
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import AssignTask from 'src/components/itemMaster/AssignTask.vue';
import {
  deleteStockItemTask,
  getStockItemTasks,
} from 'src/services/stockItemtasksService';
import { QTableColumn, useQuasar } from 'quasar';
import { StockItemTask } from 'src/services/type';
import { resolveDjangoUrl } from 'src/boot/axios';
import eformIcon from 'src/assets/style/Icon.png';
import MyDialog from '../container/MyDialog.vue';
import ScrollArea from '../ScrollArea.vue';

const editedRow = ref();
const editDialogVisible = ref(false);
const deleteDialogVisible = ref(false);

const $q = useQuasar();

const props = defineProps<{
  stock_id: number;
  stock_code: string;
}>();

const align = 'left';

const columns: QTableColumn[] = [
  /*  {
    name: 'stock_code',
    label: 'Stock Code',
    field: row=>row.stock_item.stock_code,
    sortable: true,
    align,
  }, */
  {
    name: 'name',
    label: 'Task',
    field: 'name',
    sortable: true,
    align,
  },
  {
    name: 'formNo',
    label: 'Form No',
    field: 'formNo',
    sortable: true,
    align,
  },
  {
    name: 'e_form',
    label: 'E-Form',
    field: 'e_form',
    sortable: true,
    align,
  },
  {
    name: 'type',
    label: 'Type',
    field: 'type',
    sortable: true,
    align,
  },
  {
    name: 'actions',
    label: 'Actions',
    field: 'actions',
    align,
  },

  {
    name: 'mtce_type',
    label: `M'tce Type`,
    field: 'mtce_type',
    sortable: true,
    align,
  },
];

let selected_delete_item = 0;

const cmRows = ref();
const pmRows = ref();
const nmRows = ref();
const igiRows = ref();
const createNewTask = ref(false);
const assignTask = ref(false);

async function getStockItemTasksData() {
  const res = await getStockItemTasks(props.stock_code);
  console.log(res.data);

  if (res.data) {
    cmRows.value = res.data.data.filter((i) => i.mtce_type == 'CM');
    pmRows.value = res.data.data.filter((i) => i.mtce_type == 'PM');
    nmRows.value = res.data.data.filter((i) => i.mtce_type == 'NM');
    igiRows.value = res.data.data.filter((i) => i.mtce_type == 'IGI');
  }
}

function openEditDialog(row: StockItemTask) {
  editedRow.value = { ...row };
  editDialogVisible.value = true;
}

function dblclickFn(evt: any, row: StockItemTask) {
  editedRow.value = { ...row };
  editDialogVisible.value = true;
}

function openDeleteDialog(row: StockItemTask) {
  editedRow.value = { ...row };
  selected_delete_item = row.id;

  deleteDialogVisible.value = true;
}

function openAssignDialog() {
  assignTask.value = true;
}

function closeDialog() {
  createNewTask.value = false;
  assignTask.value = false;
  editDialogVisible.value = false;
}

function goEformWebsite(eform_schema_id: number) {
  const url = `${resolveDjangoUrl()}/eforms/eformPreview/${eform_schema_id}`;
  window.open(url);
}

/* function deleteFn() {
  deleteStockItemTask(selected_delete_item)
    .then((res) => {
      if (res) {
        $q.notify({
          type: 'positive',
          message: 'Delete successfully',
        });
        getStockItemTasksData();
      }
    })
    .finally(() => {
      deleteDialogVisible.value = false;
    });
} */

function deleteFn(id: number) {
  $q.dialog({
    title: 'Confirm',
    message: 'Are you sure to delete this record?',
    cancel: true,
  }).onOk(async () => {
    const res = await deleteStockItemTask(id);
    if (res) {
      getStockItemTasksData();
    }
  });
}

getStockItemTasksData();
</script>

<style scoped>
table {
  border-collapse: collapse;
  table-layout: fixed;
}
table thead tr th {
  border-bottom: 1px solid #d9d9d9;
}

table tbody tr {
  border-top: 1px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;
}
td {
  padding: 0.5rem;
}

table thead {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 10;
}
</style>
